<#import "../macro/components.ftl" as components/>
<#include "../macro/layout_default.ftl"/>

<@head>
<link rel="stylesheet" href="/misc/app/css/product_list.css"/>
</@head>

<@body>
<script src="/misc/app/js/product_list.js"></script>
<script src="/misc/jquery-fileupload-9.14.0/jquery.ui.widget.js"></script>
<script src="/misc/jquery-fileupload-9.14.0/jquery.fileupload.js"></script>
<script>var PicDomain = "${PicDomain!}"</script>
</@body>

<@layout_default>
<div class="box">
    <div class="box-header with-border">
        <span class="pull-right text-muted">共 ${productList.resultTotal} 条记录</span>
        <input type="hidden" id="resultTotal_hidden" value="${productList.resultTotal}" />
        <form class="form-inline" action="/product">
            <div class="input-group">
                <div class="input-group-addon">关键字</div>
                <input type="text" class="form-control" style="width: 260px" name="keyword" value="${keyword!}" placeholder="名称、编号、条码、品牌"/>
            </div>
            <div class="input-group">
                <div class="input-group-addon">状态</div>
                <select class="form-control" name="state">
                    <option value="">全部</option>
                    <option value="1" ${(state?exists && state == 1)?string("selected","")}>使用中</option>
                    <option value="2" ${(state?exists && state == 2)?string("selected","")}>已封存</option>
                </select>
            </div>

            <button type="submit" class="btn btn-warning"><i class="fa fa-search"></i> 查询</button>
            <button type="button" id="search_reset" class="btn btn-warning"><i class="fa"></i> 重置</button>
            <button type="button" class="btn btn-default" name="btn_new_product" data-toggle="modal" data-target="#md_new_product"><i class="fa fa-plus"></i> 录入产品</button>
        </form>
        <form class="form-inline hide">
            <input class="form-control"/>
            <input type="email" class="form-control"/>
            <button type="submit" class="btn btn-default">Send invitation</button>
        </form>
    </div>

    <!-- /.box-header -->
    <div class="box-body">
        <table class="table table-striped table-hover">
            <tr>
                <th>ID</th>
                <th>产品名称</th>
                <th>产品样图</th>
                <th>产品编号</th>
                <th>条形码</th>
                <th>品牌</th>
                <th>状态</th>
                <th>新增时间</th>
                <th>操作人</th>
                <th>操作</th>
            </tr>
            <#list productList.result as item>
                <tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <#--<td><a class="btn btn-default btn-xs" href="${PicDomain!}${(item.pictures?split(','))[0]!}" target="_blank" data-toggle="product-pic-popover" data-pic-uri="${(item.pictures?split(','))[0]!}"><i class="fa fa-picture-o"></i></a></td>-->
                    <td><a class="btn btn-default btn-xs" href="${PicDomain!}${(item.pictures?split(','))[0]!}" target="_blank"><img src="${PicDomain!}${(item.pictures?split(','))[0]!}" height="50px" width="50px"/></a></td>
                    <td>${item.number}</td>
                    <td>${item.barcode}</td>
                    <td>${item.brandName!}</td>
                    <td><#if item.state==1><span class="text-green">使用中</span><#elseif item.state==2><span class="text-yellow">已封存</span><#else><span class="text-danger">未知</span></#if></td>
                    <td>${item.createTime?string("yyyy-MM-dd")}</td>
                    <td>${item.createStaffAccount!}</td>
                    <td>
                        <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#md_edit_product" data-product-number="${item.number}">编辑</button>
                        <#--<button type="button" class="btn btn-default btn-xs" name="btn_delete_product" data-product-number="${item.number}">删除</button>-->
                    </td>
                </tr>
            </#list>
        </table>
        <table class="table table-striped table-hover">
        	<tr>
        		<td colspan="13" style="text-align:right;background-color:white;">
        			<a href="javascript:void(0);" name="btn_export"><i class="glyphicon glyphicon-save"></i> 数据导出</a>
        		</td>
        	</tr>
        </table>
    </div>
    <!-- /.box-body -->
    <div class="box-footer text-center">
        <@components.pagination "/product?keyword=${keyword!}&page=$page",productList.page,productList.pageTotal/>
    </div>
</div>


<!--=========== Modals =============-->
<!-- md_new_product -->
<div class="modal" id="md_new_product" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><i class="fa fa-plus"></i> 录入产品</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" name="form_new_product">
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 产品名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="产品名称" name="name"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 产品编码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="产品编码" name="number"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 条形码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="条形码" name="barcode"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">价格</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="价格" name="price"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 品牌</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="brandId">
                                <option value="">请选择品牌</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 规格</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="pbcId">
                                <option value="">请选择规格</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 状态</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="state">
                                <option value="1">正常</option>
                                <option value="2">停用</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">产品图片</label>
                        <div class="col-sm-10">
                            <p class="help-block"><i class="fa fa-info-circle text-yellow"></i> 点击预览图可删除图片，图片数量限制3张以内</p>
                            <span class="ctn-product-pics" id="ctn_new_product_pics"></span>
                            <input type="file" id="ipt_new_product_upload_pic" class="hide" name="file"/>
                            <button type="button" class="btn-upload-productimg" name="btn_new_product_upload_pic"><i class="fa fa-plus"></i></button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" name="btn_save_new_product">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- md_new_product -->
<div class="modal" id="md_edit_product" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><i class="fa fa-pencil-square-o"></i> 编辑产品</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" name="form_edit_product">
                    <input type="hidden" name="id"/>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 产品名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="name"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 产品编码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="number"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 条形码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="barcode"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">价格</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="price"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 品牌</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="brandId">
                                <option value="">请选择品牌</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 规格</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="pbcId">
                                <option value="">请选择规格</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 状态</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="state">
                                <option value="1">正常</option>
                                <option value="2">停用</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">产品图片</label>
                        <div class="col-sm-10">
                            <p class="help-block"><i class="fa fa-info-circle text-yellow"></i> 点击预览图可删除图片，图片数量限制3张以内</p>
                            <span class="ctn-product-pics" id="ctn_edit_product_pics"></span>
                            <input type="file" id="ipt_edit_product_upload_pic" class="hide" name="file"/>
                            <button type="button" class="btn-upload-productimg" name="btn_edit_product_upload_pic"><i class="fa fa-plus"></i></button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" name="btn_save_edit_product">保存</button>
            </div>
        </div>
    </div>
</div>

</@layout_default>